﻿@{
    ViewBag.Title = "系统公告";
    Layout = "~/Views/Shared/_GridCommonLayout.cshtml";
}

<style type="text/css">
    #NoticeMessageModal {
        /* SET THE WIDTH OF THE MODAL 设置Modal的宽度*/
        width: 1000px;
        /* CHANGE MARGINS TO ACCOMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */
        margin: -50px 0 0 -450px;
    }

        #NoticeMessageModal .modal-body {
            max-height: 500px;
                 }
        /*修改新建公告页面的布局*/
        .form-horizontal .controls {
    margin-left: 90px;
}

.form-horizontal .control-label {
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 90px;
}
</style>




<!--begin grid code-->
<section id="widget-grid" class="">
    <div class="row">

     <!--Operation-->
<div class="heading-buttons">
    <h3 class="glyphicons edit">
        <i></i><span>公告管理</span>
    </h3>
    <div class="buttons pull-right">
        <button type="button" class="btn btn-success btn-labeled " data-bind="click: $root.showAddBefore" >
                   
                    <span class="btn-label"><i class="glyphicon glyphicon-plus"></i>
                    </span>添加公告</button>

                <button type="button" class="btn btn-primary btn-labeled "
                    data-bind="click: $root.onDataDeleting">
                    <span class="btn-label"><i class="glyphicon glyphicon-remove"></i>
                    </span>批量删除</button>
    </div>
    <div style="clear: both;"></div>
</div>
<!--/Operation-->

<!--Search-->
<div class="filter-bar">
    <form id="formSearch">
        <div class="lbl glyphicons search" style="cursor: pointer;" data-bind="click: $root.search">
            <i></i>筛选
        </div>


        <div>
            <label>标题：</label><div class='input-append'>
                <input id='txtbSrSTitle' name='txtbSrSTitle' type='text' placeholder='标题' class='input-mini' style='width: 120px;' />
            </div>
        </div>

        <div>
            <label>发送者名：</label><div class='input-append'>
                <input id='txtbSrSUserName' name='txtbSrSSenderName' type='text' placeholder='发送者名' class='input-mini' style='width: 120px;' />
            </div>
        </div>




        <div class="clearfix">
        </div>
    </form>
</div>
<!--/search-->


        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sortable-grid ui-sortable">
            <div id="wid-id-2" class="jarviswidget jarviswidget-color-darken jarviswidget-sortable" data-widget-editbutton="false">
                <header>
                    <span class="widget-icon"><i class="fa fa-table"></i></span>
                    <h2>公告管理</h2>
                </header>
                <div style="top:30px">
                    <div class="jarviswidget-editbox"></div>
                    <div class="widget-body no-padding">
                        <div role="grid" id="bannerGrid" class="dataTables_wrapper form-inline">
                            <div class="table-responsive">

                                <div class="dt-wrapper" style="overflow-y: auto;">
                                    <table class="table table-striped table-bordered table-hover checkboxs">
                                             <!--table head-->
        <thead>
            <tr>
                <th style="width:1%">
                    <input type="checkbox" value="0" />
                </th>
                <!-- ko foreach: headers -->
                <th data-bind="style: { width: width }" class="center">
                    <a href="#" data-bind="text: displayText@*, click: $root.sort*@" style="color: black"></a>
                    <i class="icon-circle-arrow-up" data-bind="visible: value == $root.orderBy() && $root.isAsc()"></i>
                    <i class="icon-circle-arrow-down" data-bind="visible: value == $root.orderBy() && !$root.isAsc()"></i>
                </th>
                <!-- /ko -->
                <th class="center" style="width:60px;">操作
                </th>
            </tr>
        </thead>
        <!--/table head-->
        <!--table body(Notice list)-->
        <tbody data-bind="foreach: recordSet">
            <tr class="selectable" onclick="">
                <td class="center">
                    <input type="checkbox" name="userSelector" data-bind="value: Id" />
                    <input type="hidden" data-bind="value: Id, attr: { id: Id }" />
                </td>
                <td class='center'><strong data-bind='text: Tms.getNoticType(INoticesType)'></strong></td>

                <td class='center'><strong data-bind='text: STitle'></strong></td>
                <td class='center'><strong data-bind='text: Tms.formatDate(DSendtime)'></strong></td>


                <td class='center'><strong data-bind='text: SSenderName'></strong></td>

                <td class="center">
                    <a  class="btn-action glyphicons pencil btn-success" data-bind="click: $root.showUpdateModal">
                        <i></i></a>
                </td>
            </tr>
        </tbody>
        <!--/table body( Notice list)-->

                                    </table>

                                </div>
                                <!-- 分页 -->
                                <ul class="pagination pagination-alt">
                                    <li>
                                        <a data-bind="click: firstPage"><i class="fa fa-fast-backward "></i></a>
                                    </li>
                                    <li>
                                        <a data-bind="click: prevPage"><i class="fa  fa-backward  "></i></a>
                                    </li>
                                    <li>
                                        <a>
                                            <input id="toPage" type="text" data-bind="value: pageIndex, event: { change: $root.changePageIndex }" style="width: 25px;" />
                                            /共<span data-bind="html: totalPages"></span>页 
                                        </a>
                                    </li>
                                    <li>
                                        <a data-bind="click: nextPage"><i class="fa fa-forward "></i></a>
                                    </li>
                                    <li>
                                        <a data-bind="click: lastPage"><i class="fa fa-fast-forward "></i></a>
                                    </li>
                                </ul>

                                <div class="dt-top-row total  ">
                                    当前记录共：<span data-bind="html: totalCount"></span>条
                                </div>
                                <!--end 分页-->
  @*@Html.Partial("_pager")*@
          
                                </div>

                
        



                            </div>
                        </div>

                    </div>
                </div>


    </article>
    </div>
</section>


<!--Notice详细对话框-->
<div id="NoticeMessageModal" class="modal  fade" tabindex="-1" role="dialog" aria-labelledby="userMessageModalLabel"
    aria-hidden="true">
    <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h2>公告信息
        </h2>
    </div>
    <div class="modal-body" >
        <input type='hidden' id='txtbID' name='txtbID' />
        <form class="form-horizontal" id="formNotice">

            <!-- ko with: NodeValue -->
            <div class='control-group' >
                <label class='control-label span2'>标题:</label><div class='controls'>
                    <input type='text' id='txtbSTitle' name='txtbSTitle' placeholder='标题' class='span10' data-bind='value: STitle' />
                </div>
            </div>
            <div class='control-group'>
                <label class='control-label'>公告类别:</label><div class='controls'>
                    <select id='txtbIType' name='txtbIType' data-bind=" options: $root.NoticeTypes, optionsText: 'name', optionsValue: 'value', value: INoticesType">
                    </select>
                </div>
            </div>

            <!-- /ko -->
            <div class='control-group'>
                <label class='control-label span2'>具体内容:</label>
                <div class='controls'>

                    <div id="editor" style="height: 300px;"></div>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">
            取消</button>
        <button id="btnSaveOrUpdateModel" class="btn btn-primary" aria-hidden="true" data-bind=" click:$root.onDataAddingOrUpdate">
            确定</button>
    </div>
        </div>
</div>
<!--/详细Notice对话框-->

@section script{
    <script src="~/Scripts/jquery.validate-vsdoc.js"></script>
       <script src="~/js/ZjbCommon.js"></script>
<script src="~/Scripts/customJS/commonHelper.js"></script>
<script src="~/Scripts/customJS/gridCommon.js"></script>
 <script type="text/javascript" charset="utf-8" src="~/Scripts/ueditor/ueditor.config.js"></script>
 <script type="text/javascript" charset="utf-8" src="~/Scripts/ueditor/ueditor.all.js"></script>
  

    <script type="text/javascript">
        pageSetUp();
        $("body #main #ribbon ol").append(" <li><a class='glyphicons home' href='/SysManage/Index'><i></i>九九选材网</a></li><li >公告管理</li>");

        var gdViewModel;


        $(function () {
            $._messengerDefaults = {
                extraClasses: 'messenger-fixed messenger-theme-future messenger-on-bottom messenger-on-right'
            }; //默认提示位置;

            var ue = new baidu.editor.ui.Editor();

            ue.render("editor");   //这里填写要改变为编辑器的控件id


            var options = {

                dialogId: "NoticeMessageModal", //添加对话框
                tableMaskElement: $("#bannerGrid"),//  tableId  by zjb
                pageSize: 10, //分页大小
                hidId: $("#txtbID"),
                SaveUpdateBtn: $("#btnSaveOrUpdateModel"),
                frmElement: $("#formNotice"),

                //节点数据
                NodeValue: ko.observable({
                                                          
                    SSenderNo:'',
                    SSenderName:'',
                    STitle:'',
                    DSendtime: new Date(),
                    INoticesType:'',
                    SSendIp: '',
                    SContent: '',
                    IIsRead: '',

                }),


                //用户列表Grid头部列名称
                headers: [
     { displayText: '公告类型', value: 'INoticesType', width: 'auto' },
     { displayText: '标题', value: 'STitle', width: 'auto' },
     { displayText: '发布时间', value: 'DSendtime', width: 'auto' },
     { displayText: '发布者姓名', value: 'SSenderName', width: 'auto' }

                ],

                //默认的排序方式
                defaultOrderBy: "Id",
                //用户查询URL
                dataQueryUrlAccessor: function () {
                    return "/api/NoticesExt/DefaultSearch";
                },

                //添加用户URL
                dataAddUrlAccessor: function () {

                    ue.sync();       //同步内容
                    //保存Ext信息
                    var postData = ue.getContent();
                    this.NodeValue().SContent = postData;
                    // return "/api/Notice/Post";
                    return "/api/NoticesExt/CreatNotice";
                },
                dataUpdateAccessor: function (key) {
                    ue.sync();       //同步内容
                    //保存Ext信息
                    var postData = ue.getContent();
                    this.NodeValue().SContent = postData;

                    return "/api/NoticesExt/Update/" + key;
                },
                dataNodeSelect: function (id) {
                    //return "/api/Notice/get/" + id;
                    return "/api/NoticesExt/GetNotices/" + id;
                },

                dataDeleteAccessor: function (data) {
                    var userIDs = "";
                    var check = $("input:checked");  //得到所有被选中的checkbox
                    check.each(function (i) {        //循环拼装被选中项的值
                        userIDs = userIDs + ',' + $(this).val();
                    });
                    //清除多余的分割号
                    userIDs = dropRsplit(userIDs, ",");
                    if (userIDs != "") {
                        return appendQueryString("/api/NoticesExt/DeleteNotices", { ids: userIDs });
                    } else
                        return "";

                }

                , initEd: function () {

                }
                , showDlgBefore: function () {
                    ue.setContent("");//清空ue
                }
                  , showDetailEnd: function (data) {
                      ue.setContent(this.NodeValue().SContent);//显示ue
                  }
                 , changeEnd: function (key, event) {
                     //对话框保存的后置事件

                 }
            };

            gdViewModel = new gridViewModel(options);


            gdViewModel.init();

            gdViewModel.NoticeTypes = ko.observableArray([
                new Tms.optionItem("所有用户", 3),
                new Tms.optionItem("教师", 1),
                new Tms.optionItem("学生", 0),
            ]);

            ko.applyBindings(gdViewModel);


            options.frmElement.validate({
                rules: {


                    txtbSTitle: { required: true, maxlength: 50 }, txtbSContent: { maxlength: 5000 }

                },
                messages: {


                    txtbSTitle: { required: '必填项', maxlength: '最大长度为40' }, txtbSContent: { maxlength: '最大长度为5000' }

                }
            });


        });

    </script>
    }


 <!--/end grid code-->
